<template>
  <div class="user-table">
      <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="picture" label="头像" width="100">
          </el-table-column>
          <el-table-column prop="nickname" label="昵称" width="100">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
          <el-table-column prop="grade" label="年级" width="120"> </el-table-column>
          <el-table-column prop="phone" label="联系方式" width="120">
          </el-table-column>
          <el-table-column prop="isInner" label="内部成员" width="120">
          </el-table-column>
          <el-table-column prop="goal" label="目标方向" width="120">
          </el-table-column>
          <el-table-column prop="userStatus" label="账号状态" width="120">
          </el-table-column>
          <el-table-column label="操作" width="150">
              <span class="font-color" @click="showConfirm">禁用</span>
          </el-table-column>
      </el-table>
      <div class="pagination">
            <a-pagination
                show-quick-jumper
                :default-current="1"
                :total="total"
                @change="onChange"
            />
      </div>
  </div>
</template>

<script>
export default {
    data: function () {
        return {
          //用户列表
            tableData: [
                {
                    picture: "图片",
                    nickname: "飞絮",
                    name: "张三",
                    grade: "2019",
                    phone: "18681281728",
                    isInner: "负责人",
                    goal: "前端",
                    userStatus: "正常",
                },
            ],
        };
    },
    methods: {
        //点击禁用按钮
        showConfirm() {
            this.$confirm({
              title: "确认禁用当前用户吗",
              content: (h) => <div style="color:red;">Some descriptions</div>,
              onOk() {
                  console.log("OK");
              },
              onCancel() {
                  console.log("Cancel");
              },
              class: "test",
          });
        },
    },
};
</script>

<style lang='scss' scoped>
$color: #ffffff;
$border-radius: 15px;
.user-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 95%;
  height: 650px;
  margin-left: 50%;
  transform: translate(-50%);
  margin-top: 20px;
  background-color: $color;
  border-radius: $border-radius;
  padding: 10px;
  .el-table::before {
      height: 0;
  }
  .pagination {
      margin-top: 10px;
      margin-bottom: 20px;
  }
  .font-color {
      color: #3952fd;
      cursor: default;
  }
}
</style>